<template>
  <div class="calendar-box">
    <div class="left-box">
      <el-calendar v-model="date">
        <template
          slot="dateCell"
          slot-scope="{date, data}"
        >
          <p style="text-align: center;" :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split('-').slice(2).join('-') }}
            <br>
            <!--            <icon style="color: red;" class="el-icon-star-on"></icon>-->
            <span v-if="checkShow(data.day)" style="width: 5px;height: 5px;display: inline-block;border-radius: 50%;background: red;" />
          </p>
        </template>
      </el-calendar>
    </div>
    <div class="right-box">
      <div class="top-info">
        <div class="time">{{ date && date.Format('yyyy-MM-dd') }}</div>
        <div class="input"><el-input v-model="input" readonly placeholder="" /></div>
        <div class="btns">
          <template v-if="btnType===1">
            <div class="btn-box-one">
              <!--              <el-button v-if="!!selectObj.id" type="primary" size="small" style="width:100%;" @click="handleChooseCourse(1)">选择每日云听</el-button>-->
              <div class="btn-item-main">
                <el-button type="primary" size="small" @click="handleChooseCourse(1)">选择每周答题</el-button>
                <el-button type="primary" size="small" @click="handleSave()">保存</el-button>
                <!--                <el-button v-if="!!selectObj.id" type="primary" size="small" @click="handleTop"> {{ selectObj.isTop===1?'取消置顶':'置顶' }}</el-button>-->
                <el-button type="primary" size="small" @click="handleDelete">删除</el-button>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="desc-info">
        <template>
          <p>1.左侧蓝色背景表示本周已完成配置。</p>
          <p>2.每次配置完成后均需点击保存按钮。</p>
          <p>3.如未配置或配置删除后，移动端将不会展示。</p>
          <p>4.每周一00：00：00自动更新本周一至周日的答题内容。</p>
        </template>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      custom-class="live-dialog"
      :visible.sync="showSelectCourse"
      title="选择每周答题"
      width="1200px"
      center
    >
      <choose-course
        :is-child="setType===1"
        :course-classify="courseClassify"
        @select="handleSubmit"
      />
      <div slot="footer" class="dialog-footer">
        <el-button
          type="default"
          style="padding: 10px 30px"
          @click="handleClose1"
        >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryCalendar, getConfig, weekFocueDelete, weekFocueTop, weekFocueInsert } from '../api'
import chooseCourse from './chooseCourse.vue'
import chooseCraftsman from './chooseCraftsman.vue'
export default {
  name: 'Calendar',
  components: {
    chooseCourse,
    chooseCraftsman
  },
  props: {
    btnType: {
      type: Number,
      default: 1 // 0是上下结构，1是一排
    },
    setType: {
      type: Number,
      default: 1 // 1云听、2匠星、3工具资源包
    }
  },
  data() {
    return {
      date: new Date(),
      input: '',
      dataList: [],
      showSelectCourse: false,
      selectObj: {},
      courseClassify: '',
      configValue: [],
      selectItem: {}
    }
  },
  watch: {
    async date(val) {
      await this.queryCalendarFun(val)
      console.log(this.selectObj.subjectName, 244242, this.selectObj)
    }
  },
  async created() {
    this.$nextTick(() => {
      this.date = new Date()
    })
    await getConfig({ name: 'DALIY_FOCUS_TYPE' }).then(res => {
      this.configValue = res.data && res.data.data.configValue && JSON.parse(res.data.data.configValue)
    })
    if (this.btnType === 1) {
      this.courseClassify = this.configValue[0].mryt
    } else if (this.btnType === 2) {
      this.courseClassify = this.configValue[1].jrjx
    } else {
      this.courseClassify = this.configValue[2].gjzyb
    }
  },
  mounted() {

  },
  methods: {
    handleDelete() {
      if (!this.selectObj.id) {
        return this.$message({
          type: 'warning',
          message: '请先选择或保存答题内容！'
        })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '请稍后...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        weekFocueDelete({
          id: this.selectObj.id
        }).then(res => {
          loading.close()
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.queryCalendarFun(this.date)
        }).catch(err => {
          loading.close(err)
        })
      }
    },
    handleTop() {
      if (!this.selectObj.id) {
        return this.$message({
          type: 'warning',
          message: '请选择数据'
        })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '请稍后...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        weekFocueTop({
          id: this.selectObj.id,
          isTop: this.selectObj.isTop === 1 ? 0 : 1
        }).then(res => {
          loading.close()
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.queryCalendarFun(this.date)
        }).catch(err => {
          loading.close(err)
        })
      }
    },
    handleSave() {
      if (!this.selectItem.id) {
        return this.$message({
          type: 'warning',
          message: '请选择数据'
        })
      }
      const loading = this.$loading({
        lock: true,
        text: '请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const params = {
        dateTime: this.date.Format('yyyy-MM-dd hh:mm:ss'),
        subjectId: this.selectItem.id,
        focusType: 'DTLX_MZLX'
      }
      weekFocueInsert(params).then((res) => {
        loading.close()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.queryCalendarFun(this.date)
      }).catch(err => {
        loading.close(err)
      })
    },
    handleChooseCourse(type) {
      switch (type) {
        case 1:this.showSelectCourse = true
          break
        case 2:this.showSelectCourse = true
          break
        case 3:this.showSelectCourse = true
          break
      }
    },
    handleClose1() {
      this.showSelectCourse = false
    },
    handleSubmit(item) {
      this.selectItem = item
      this.handleClose1()
      this.input = this.selectItem.courseName || this.selectItem.name
    },
    checkShow(time) {
      for (let i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i].dateTime) {
          if (time === this.dataList[i].dateTime.split(' ')[0]) {
            return true
          }
        }
      }
    },
    queryCalendarFun(val) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return new Promise((resolve, reject) => {
        queryCalendar({ focusType: 'DTLX_MZLX', dateTime: new Date(this.date).Format('yyyy-MM-dd hh:mm:ss') })
          .then((response) => {
            this.dataList = response.data.data
            if (val) {
              const filterList = this.dataList.filter((item) => {
                return (item.dateTime && item.dateTime.startsWith(val.Format('yyyy-MM-dd')))
              })
              this.selectObj = filterList[0] || {}
              this.input = this.selectObj.subjectName || ''
              this.$emit('updateTime')
            }
            loading.close()
          })
          .catch((error) => {
            reject(error)
            loading.close()
          })
      })
    }
  }
}
</script>

<style type="text/css" lang="scss">
.calendar-box{
    padding: 20px 20px 20px 20px;
    display: flex;
    margin-bottom: 30px;
  .left-box{
    height: auto;
    width: 500px;
  }
  .right-box{
    margin-left:20px ;
    flex: 1;
    height: auto;
    .top-info{
      height: 100px;
      border: 1px solid #e6ebf5;
      display: flex;
      padding: 10px;
      align-items: center;
      .el-button{
        margin-left: 5px!important;
      }
      .time{
        color: #333;
      }
      .input{
        margin-left: 10px;
        flex: 1;
      }
      .btns{
        margin-left: 10px;
        width: 260px;
        height: 100px;
        display: flex;
        align-items: center;
        .btn-box-one{
          .btn-item-main{

          }
        }
        .btn-box-two{
          display: flex;
          align-items: center;
        }
      }
    }
    .desc-info{
      margin-top: 20px;
      font-size: 18px;
    }
  }
  .el-calendar-day{
    height:66px;
  }
}
</style>
